<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI 3.x: CSS Grids Units Example</title>
    <link rel="stylesheet" href="reset.css" type="text/css">
    <link rel="stylesheet" href="grids.css" type="text/css">

<style>
body {color:#555;text-align:center;font: 12px/1.5 arial,helvetica,clean,sans-serif;}

div.yui3-g {
    text-align:left;
    vertical-align:middle;
}

.content {
    background:#424242;
    border:solid #f00;
    border-width:0 1px 1px;
    color:#fff;
    margin-right:10px; /* "column" gutters */
    padding:5px 2px;
}
</style>

</head>
<body>
<div class="yui3-g">
    <div class="yui3-u-1-2">
        1/2
    </div>
    <div class="yui3-u-1-2">
        1/2
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-2">
        <div class="content">1/2</div>
    </div>
    <div class="yui3-u-1-2">
        <div class="content">1/2</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-3-4">
        <div class="content">3/4</div>
    </div>
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-3">
        <div class="content">1/3</div>
    </div>
    <div class="yui3-u-1-3">
        <div class="content">1/3</div>
    </div>
    <div class="yui3-u-1-3">
        <div class="content">1/3</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-3">
        <div class="content">1/3</div>
    </div>
    <div class="yui3-u-2-3">
        <div class="content">2/3</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-5">
        <div class="content">1/5</div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">2/5</div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">2/5</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-3-5">
        <div class="content">3/5</div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">2/5</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-6">
        <div class="content">1/6</div>
    </div>
    <div class="yui3-u-5-6">
        <div class="content">5/6</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-8">
        <div class="content">1/8</div>
    </div>
    <div class="yui3-u-3-8">
        <div class="content">3/8</div>
    </div>
    <div class="yui3-u-3-8">
        <div class="content">3/8</div>
    </div>
    <div class="yui3-u-1-8">
        <div class="content">1/8</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-3-8">
        <div class="content">3/8</div>
    </div>
    <div class="yui3-u-5-8">
        <div class="content">5/8</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-7-8">
        <div class="content">7/8</div>
    </div>
    <div class="yui3-u-1-8">
        <div class="content">1/8</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
    <div class="yui3-u-1-2">
        <div class="content">1/2</div>
    </div>
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-1-8">
        <div class="content">1/8</div>
    </div>
    <div class="yui3-u-1-2">
        <div class="content">1/2</div>
    </div>
    <div class="yui3-u-1-8">
        <div class="content">1/8</div>
    </div>
    <div class="yui3-u-1-4">
        <div class="content">1/4</div>
    </div>
</div>

<div class="yui3-g">
    <div class="yui3-u-1-12">
        <div class="content">1/12</div>
    </div>
    <div class="yui3-u-5-12">
        <div class="content">5/12</div>
    </div>
    <div class="yui3-u-5-12">
        <div class="content">5/12</div>
    </div>
    <div class="yui3-u-1-12">
        <div class="content">1/12</div>
    </div>
</div>

<div class="yui3-g">
    <div class="yui3-u-7-12">
        <div class="content">7/12</div>
    </div>
    <div class="yui3-u-5-12">
        <div class="content">5/12</div>
    </div>
</div>

<div class="yui3-g">
    <div class="yui3-u-11-12">
        <div class="content">11/12</div>
    </div>
    <div class="yui3-u-1-12">
        <div class="content">1/12</div>
    </div>
</div>

<div class="yui3-g">
    <div class="yui3-u-1-24">
        <div class="content">1/24</div>
    </div>
    <div class="yui3-u-5-24">
        <div class="content">5/24</div>
    </div>
    <div class="yui3-u-7-24">
        <div class="content">7/24</div>
    </div>
    <div class="yui3-u-11-24">
        <div class="content">11/24</div>
    </div>
</div>

<div class="yui3-g">
    <div class="yui3-u-17-24">
        <div class="content">17/24</div>
    </div>
    <div class="yui3-u-7-24">
        <div class="content">7/24</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-19-24">
        <div class="content">19/24</div>
    </div>
    <div class="yui3-u-5-24">
        <div class="content">5/24</div>
    </div>
</div>
<div class="yui3-g">
    <div class="yui3-u-23-24">
        <div class="content">23/24</div>
    </div>
    <div class="yui3-u-1-24">
        <div class="content">1/24</div>
    </div>
</div>
</body>
</html>


